<template>
  <el-row class="content">
    <el-row class="top-header p-10 flex-row">
      <el-row style="width: 200px">
        <el-button type="primary" @click="add" plain>
          <span class="iconfont iaiai-add f20 m-r-5"></span>添加
        </el-button>
      </el-row>
      <el-row class="flex-max search">
        <el-input v-model="search" style="width: 240px" placeholder="搜索岗位名、备注..." clearable class="m-r-10" />
        <el-button type="primary" v-if="!loading" @click="searchData" style="width: 90px" plain>
          <span class="iconfont iaiai-search f20 m-r-5"></span>搜索
        </el-button>
        <el-button type="primary" v-if="loading" :loading="loading" style="width: 90px">搜索</el-button>
      </el-row>
    </el-row>
    <el-row class="flex-max pr">
      <el-table :data="tableData" height="100%" class="pa-fill">
        <el-table-column prop="name" label="岗位名" width="200" />
        <el-table-column prop="remark" label="备注" min-width="200" />
        <el-table-column label="状态" width="100">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.disabled==0">正常</el-tag>
            <el-tag type="danger" effect="dark" v-if="scope.row.disabled==1">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="200">
          <template #default="scope">
            {{timestampToDateString(scope.row.createTime)}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120" align="center">
          <template #default="scope">
            <el-row class="flex-row center-flex">
              <el-tooltip effect="dark" content="编辑" placement="bottom">
                <el-button link type="primary" @click="edit(scope.row.id)">
                  <span class="iconfont iaiai-edit" />
                </el-button>
              </el-tooltip>
              <el-divider direction="vertical" />
              <el-popconfirm title="是否要删除此岗位?" :hide-icon="true" @confirm="del(scope.row.id)">
                <template #reference>
                  <el-row>
                    <el-tooltip effect="dark" content="删除" placement="bottom">
                      <el-button link type="danger">
                        <span class="iconfont iaiai-delete" />
                      </el-button>
                    </el-tooltip>
                  </el-row>
                </template>
              </el-popconfirm>
            </el-row>
          </template>
        </el-table-column>

        <template #empty>
          <el-empty description="无数据" />
        </template>
      </el-table>
    </el-row>

    <el-row class="content-page center-vertical p-lr-10">
      <el-pagination
          v-model:current-page="page"
          v-model:page-size="limit"
          :total="total"
          layout="sizes, prev, pager, next, total"
          :page-sizes="[10, 20, 30, 50]"
          @size-change="tableSelect"
          @current-change="chagePage"/>
    </el-row>

    <addPost ref="addPostComp" @onsuccess="addPostSuccess"/>
    <editPost ref="editPostComp" @onsuccess="editPostSuccess"/>
  </el-row>
</template>

<script lang="ts" setup>
import {inject, onMounted, ref} from "vue"
import addPost from './add.vue'
import editPost from './edit.vue'
import {timestampToDateString} from '@/core/util/date_util'

const $api = inject('$api')
const $post = inject('$post')
const $toast = inject('$toast')
const page = ref(0)
const limit = ref(20)
const total = ref(0)
const tableData = ref([])
const search = ref("")
const loading = ref(true)
const addPostComp = ref(null)
const editPostComp = ref(null)

onMounted(()=>{
  getData()
})

function getData(){
  $post($api.postList,{
    "page": page.value + 1,
    "limit": limit.value,
    "search": search.value,
  }).then((res:any)=>{
    tableData.value = res.data.result.records
    total.value = res.data.result.total
    page.value = res.data.result.current
    loading.value = false
  }).catch((err:any)=>{
    loading.value = false
  })
}

function add(){
  addPostComp.value.showComp()
}

function addPostSuccess(){
  page.value = 0
  getData()
}

function edit(id:any){
  editPostComp.value.showComp(id)
}

function editPostSuccess(){
  page.value = 0
  getData()
}

function del(id:any){
  $post($api.postDel,{id:id}).then(()=>{
    page.value = 0
    getData()

    $toast.success('删除成功')
  })
}

function searchData(){
  page.value = 0
  loading.value = true
  getData()
}

function tableSelect(n:number){
  limit.value = n
  searchData()
}

function chagePage(n: number){
  page.value = n - 1
  getData()
}
</script>

<style lang="scss" scoped>
.content{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .top-header{
    background-color: white;
    border-bottom: 1px #efefef solid;

    .search{
      float: right;
      text-align: right;
      justify-content: flex-end;
    }
  }

  .content-page{
    height: 50px;
    background-color: white;
  }
}
</style>
